//引入路由组价
import Home from "@/pages/Home";
import Login from "@/pages/Login";
import Register from "@/pages/Register";
import Search from "@/pages/Search";
import Detail from "@/pages/Detail";
import AddCartSuccess from "@/pages/AddCartSuccess";
import ShopCart from "@/pages/ShopCart";
import Trade from '@/pages/Trade'
import Pay from '@/pages/Pay'
import PaySuccess from '@/pages/PaySuccess'
import Center from '@/pages/Center'
//引入二级路由最贱
import MyOrder from '@/pages/Center/myOrder'
import GroupOrder from '@/pages/Center/groupOrder'

/* 
  当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。
  如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
*/

//路由配置信息
export default [
  {
    path: '/communication',
    component: () => import('@/pages/Communication/Communication'),
    children: [
      {
        path: 'event',
        component: () => import('@/pages/Communication/EventTest/EventTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'model',
        component: () => import('@/pages/Communication/ModelTest/ModelTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'sync',
        component: () => import('@/pages/Communication/SyncTest/SyncTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'attrs-listeners',
        component: () => import('@/pages/Communication/AttrsListenersTest/AttrsListenersTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'children-parent',
        component: () => import('@/pages/Communication/ChildrenParentTest/ChildrenParentTest'),
        meta: {
          isHideFooter: true
        },
      },
      {
        path: 'scope-slot',
        component: () => import('@/pages/Communication/ScopeSlotTest/ScopeSlotTest'),
        meta: {
          isHideFooter: true
        },
      }
    ],
  },
  {
    path: '/center',
    component: () => import('@/pages/Center'),
    meta: { isShow: true },
    //二级路由组件
    children: [
      {
        path: 'myorder',
        meta: { isShow: true },
        component: () => import('@/pages/Center/myOrder'),
      },
      {
        path: 'grouporder',
        meta: { isShow: true },
        component: () => import('@/pages/Center/groupOrder')
      },
      //重定向，在项目跑起来的时候，访问/，立马让他定向首页
      {
        path: "/center",
        meta: { isShow: true },
        redirect: "/center/myorder",
        component: () => import('@/pages/Center')
      },
    ]
  },
  {
    path: '/paysuccess',
    component: () => import('@/pages/PaySuccess'),
    meta: { isShow: true }
  },
  {
    path: '/pay',
    component: () => import('@/pages/Pay'),
    meta: { isShow: true },
    beforeEnter: (to, from, next) => {
      if (from.path == '/trade') {
        next();
      } else {
        next(false);
      }
    }
  },
  {
    path: '/trade',
    component: () => import('@/pages/Trade'),
    meta: { isShow: true },
    //路由独享守卫
    beforeEnter: (to, from, next) => {
      //去交易页面，必须是从购物车而来
      if (from.path == '/shopcart') {
        next();
      } else {
        //其他的路由组件而来，停留在当前
        next(false);
      }
    }
  },
  {
    //购物车组件
    path: "/shopcart",
    component: () => import('@/pages/ShopCart'),
    name: "shopcart",
    meta: { isShow: true },
  },
  {
    path: "/addcartsuccess",
    component: () => import('@/pages/AddCartSuccess'),
    name: "addcartsuccess",
    meta: { isShow: true },
  },
  //重定向，在项目跑起来的时候，访问/，立马让他定向首页
  {
    path: "*",
    redirect: "/home",
    component: () => import('@/pages/Home')
  },
  {
    path: "/home",
    component: () => import('@/pages/Home'),
    //meta    路由元信息
    meta: { show: true, },
  },
  {
    // path: '/search/:keyword', //需要进行占位
    path: "/search/:keyword?", //后面加了一个问号 ？  代表这个params参数可以传也可以不传
    name: "search", //当使用路由传参并且是以对象的形式传，并且还带了params 的时候，一定要给路由加一个name，因为他只会调用name的
    component: () => import('@/pages/Search'),
    meta: { show: true, },
    //4：路由组件能不能传递props数据
    //第一种写法：布尔值写法:params
    // props: true //只能传递params参数

    //第二种写法：对象写法--->额外的给路由组件传递一些props
    // props: { a: 1, b: 2 }

    //第三种写法(常用)函数写法：可以params参数、query参数，通过props传递给路由组件
    props: ($route) => {
      console.log('路由传参可以传递props数据', $route);
      return { keyword: $route.params.keyword, k: $route.query.k };
    },
    // props: ($route) => ({ keyword: $route.params.keyword, k: $route.query.k })
  },
  {
    path: "/login",
    component: () => import('@/pages/Login'),
    meta: {
      show: false,
    },
  },
  {
    path: "/register",
    component: () => import('@/pages/Register'),//路由懒加载
    meta: {
      show: false,
    },
  },
  {
    path: "/detail/:skuid",
    component: () => import('@/pages/Detail'), //这个就是路由懒加载
    //meta    路由元信息
    meta: {
      show: true,
    },
  },
];
